<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性1——state</title>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，支持react操作dom -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel，将jsx转为js -->
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">/*此处写babel*/ 
        //1.创建组件
        class Weather extends React.Component {
            //构造器调用几次？—————————— 1次
            constructor(props) {
                super(props);
                this.state = {isHot:false};//组件对象上的state，对象形式，状态
                //在构造器 中创建新的changeWeather函数，也就是改变changeWeather中this指向问题 从undefined->Weather{}
                this.changeWether = this.changeWether.bind(this);
            }

            //render调用几次？—————————— 1+n次  1-初始化 n-状态更新次数 状态修改就调用一次
            render(){
                const {isHot} = this.state;
                console.log(this,'----------');
                //标签里头注意是onClick,传的函数用{}，不加()
                //changeWeather是作为onclick的回调，所以是直接调用
                //类中的方法默认开启局部的严格模式
                return <h1 onClick={this.changeWether}>今天天气{isHot ? '炎热' : '凉快'}</h1>;
            }
            
            //changeWether调用几次？—————————— 点几次调用几次
            changeWether() {
                //状态不可直接修改，要用API 使用setState更新 更新是合并，不是替换
                const isHot = this.state.isHot; 
                this.setState({isHot:!isHot});
                // console.log(this,'+++++++++++');
                // render();
            }
        }
        
        //2.渲染虚拟DOM到页面
        ReactDOM.render(<Weather/>,document.getElementById('test'));
        
    </script>
</body>
</html>